<template>
  <div class="guide-detail">
    <div v-if="post" class="detail-content">
      <div class="header">
        <h1>{{ post.title }}</h1>
        <div class="meta-info">
          <span class="city">{{ post.city }}</span>
          <span class="category">{{ post.category }}</span>
          <span class="view-count">
            <el-icon><View /></el-icon>
            {{ post.viewCount }}
          </span>
        </div>
      </div>

      <div class="author-info" v-if="post.user">
        <el-avatar :src="post.user.avatar" :size="40">
          {{ post.user?.nickname?.charAt(0) }}
        </el-avatar>
        <div class="author-meta">
          <span class="nickname">{{ post.user.nickname }}</span>
          <span class="publish-time">{{ formatDate(post.createdTime) }}</span>
        </div>
      </div>

      <div class="cover-image">
        <img :src="post.coverImage" :alt="post.title">
      </div>

      <div class="content">
        <p>{{ post.content }}</p>
      </div>

      <div class="comments-section">
        <h2>用户评价 ({{ comments.length }})</h2>
        <CommentForm
          v-if="post"
          :target-id="post.id"
          target-type="POST"
          @success="fetchComments"
        />
        <div class="comment-list">
          <div v-for="comment in comments" :key="comment.id" class="comment-item">
            <div class="comment-header">
              <el-avatar :src="comment.user.avatar" :size="40">
                {{ comment.user.nickname.charAt(0) }}
              </el-avatar>
              <div class="comment-info">
                <span class="nickname">{{ comment.user.nickname }}</span>
                <el-rate v-model="comment.rating" disabled />
              </div>
            </div>
            <p class="comment-content">{{ comment.content }}</p>
            <span class="comment-time">{{ formatDate(comment.createdTime) }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useGuideDetail } from '@/ts/pages/guideDetail'
import CommentForm from '@/components/common/CommentForm.vue'
import '@/css/pages/guide-detail.css'
import { View } from '@element-plus/icons-vue'

const { post, comments, formatDate, fetchComments } = useGuideDetail()
</script> 